<template>
  <el-dialog :model-value="visible" width="80%" top="5vh" :close-on-click-modal="false" :destroy-on-close="true"
    @update:modelValue="closeDialog">
    <template #header>
      <div style="display: flex; align-items: center;">
        <span>选择附件</span>
        <el-tag :type="multiple ? 'primary' : 'success'" size="small" style="margin-left: 10px;">
          {{ multiple ? '多选' : '单选' }}
        </el-tag>
      </div>
    </template>
    <div class="attachment-modal-body">
      <AttachmentPage style="height: 100%;" v-if="visible" :picker-multiple="multiple" :show-main-header="false"
        :is-picker-mode="true" ref="attachmentPageRef" />
    </div>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="confirmSelection">确认选择</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, ref, PropType } from 'vue';
import { ElDialog, ElButton, ElTag } from 'element-plus';
import AttachmentPage from '../../pages/maintenance/attachment/attachment.vue';

interface AttachmentItem {
  id: number;
  file_path: string;
  file_name: string;
  url?: string;
}

export default defineComponent({
  name: 'AttachmentSelectorModal',
  components: {
    ElDialog,
    ElButton,
    ElTag,
    AttachmentPage,
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    multiple: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['update:visible', 'confirm-selection'],
  setup(props, { emit }) {
    const attachmentPageRef = ref<InstanceType<typeof AttachmentPage> | null>(null);

    const closeDialog = () => {
      emit('update:visible', false);
    };

    const confirmSelection = () => {
      if (attachmentPageRef.value && typeof (attachmentPageRef.value as any).getSelectedItems === 'function') {
        const items = (attachmentPageRef.value as any).getSelectedItems();

        if (!items) {
          emit('confirm-selection', []);
          closeDialog();
          return;
        }

        if (props.multiple === false && items.length > 1) {
          emit('confirm-selection', [items[0]]);
        } else {
          emit('confirm-selection', items);
        }
        closeDialog();
      } else {
        emit('confirm-selection', []);
        closeDialog();
      }
    };

    return {
      closeDialog,
      confirmSelection,
      attachmentPageRef,
    };
  },
});
</script>

<style lang="less" scoped>
.attachment-modal-body {
  padding: 0px;
  height: 75vh;
  overflow-y: auto;
}

// 修复弹窗内搜索表单的样式问题
:deep(.el-form-item) {
  margin-bottom: 15px !important;
}


// 确保搜索卡片内的表单样式正确
:deep(.search_card_view .el-form-item) {
  margin-bottom: 15px !important;
}



// If el-dialog default body padding is an issue, could override it, e.g.:
// :deep(.el-dialog__body) {
//   padding: 0px !important; 
// }

// :deep(.el-dialog__header) {
//   margin-bottom: 0px;
//   padding-bottom: 15px; 
// }</style>